<template>
  <div class="login">
    <div class="model">
      <div class="box">
        <h3>后台管理系统-欢迎登录</h3>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
          <el-form-item prop="userName">
            <el-input
              v-model="ruleForm.userName"
              placeholder="请输入用户名"
              clearable="clearable"
            >
              <template slot="prepend"><i class="el-icon-user"></i></template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="ruleForm.password"
              type="password"
              placeholder="请输入密码"
              clearable="clearable"
              show-password="show-password"
            >
              <template slot="prepend"><i class="el-icon-unlock"></i></template>
            </el-input>
          </el-form-item>
          <span>测试账号：1    密码：admin</span>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')" :loading="loading"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { post, get, setItem, getItem, remItem } from "../utils/com";
import { defineComponent } from "vue";
import md5 from "js-md5";
import router from "@/router";
import { mapGetters } from "vuex";
export default defineComponent({
  name: "Login",
  data() {
    return {
      ruleForm: {
        userName: null,
        password: null,
      },
      rules: {
        userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      loading: false,
      getInfoes: {
        userName: null,
        loginIp: "192.168.2.45",
        loginTime: Date.now(),
        ipAddr: "亚洲",
      },
    };
  },
  mounted() {
    if (this.getInfo && /^\/login$/.test(this.$route.path)) {
      this.$link("/home");
    }
  },
  computed: {
    ...mapGetters(["getInfo"]),
  },
  methods: {
    open() {
      this.$notify.success({
        title: "通知",
        message: "登陆成功！",
        showClose: false,
        duration: 1000,
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          // this.ruleForm.password = md5(this.ruleForm.password);
          this.ruleForm.password = this.ruleForm.password;
          // 以下仅本地测试
          // this.getInfoes.userName = this.ruleForm.userName;
          // this.$setItem("getInfo", this.getInfoes);
          // this.$store.commit("SET_GETINFO", this.getInfoes);
          // this.loading = false;
          // this.$link("/home");

          // 以下正式操作
          this.$store
            .dispatch("Login", this.ruleForm)
            .then((res) => {
              if (res && res.resCode == 1) {
                this.$store
                  .dispatch("MenuList", { userId: res.resObj.userId })
                  .then((res) => {});
                // console.log(getItem("menuList"))
                if (!getItem("menuList")) {
                  this.open();
                  setTimeout(() => {
                    console.log("等1s");
                    this.$link("/home");
                  }, 100);
                }
              } else {
                this.loading = false;
                return false;
              }
            })
            .catch((res) => {
              this.loading = false;
            });
        } else {
          this.loading = false;
          return false;
        }
      });
    },
  },
});
</script>

<style scoped>
.login {
  height: 100%;
  background-color: #f7f4f4;
  position: relative;
}
.login .model {
  position: absolute;
  top: 40%;
  left: 50%;
  background-color: #fff;
  border-radius: 8px;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px #ddd;
}
.login .model .box {
  width: 350px;
  padding: 10px;
  min-height: 200px;
}
.login .el-form {
  width: 280px;
  margin: 0 auto;
}
.login .el-form button {
  width: 100%;
  margin-top: 17px;
}
.login h3 {
  color: #6b6b6b;
  font-weight: 400;
  font-size: 16px;
  text-align: center;
  margin: 15px auto 35px;
}
</style>
